<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="weixin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人信息</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../static/lib/bootstrapValidator/css/bootstrapValidator.min.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-default" onclick="javascript : WeixinJSBridge.call('closeWindow')">返回<span class="glyphicon glyphicon-arrow-left"></span></button>
        </div>
        <div class="col-xs-8">
            <h5>个人信息</h5>
        </div>
    </div>
    <div>
        <form method="post" action="/user/userInfoUpdate">
            <input type="hidden" name="id" th:value="${user.id}">
            <div class="form-group">
                <label for="name">姓名<span style="color: red;">(必填)</span></label>
                <input type="text" class="form-control" id="name" name="name" th:value="${user.name}">
            </div>
            <div class="row form-group">
                <div class="col-xs-6">
                    <label for="province">省份</label>
                    <input type="text" class="form-control" name="province" th:value="${user.province}">
                </div>
                <div class="col-xs-6">
                    <label for="city">城市</label>
                    <input type="text" class="form-control" name="city" th:value="${user.city}">
                </div>
            </div>
            <div class="form-group">
                <label for="email">邮箱<span style="color: red;">(不可更改)</span></label>
                <input type="text" class="form-control" disabled id="email" name="email" th:value="${user.email}">
            </div>
            <div class="form-group">
                <label for="telephone">手机号<span style="color: red;">(必填)</span></label>
                <input type="text" class="form-control" id="telephone" name="telephone" th:value="${user.telephone}">
            </div>
            <div class="form-group">
                <label for="telephone">所在组别</label>
                <input type="text" class="form-control" disabled th:value="${user.rid} == 1 ? '发单组' : '抢单组'">
            </div>

            <div class="text-center" style="margin-top: 3.125rem;">
                <button type="button" id="submit" class="btn btn-primary" style="width: 100%;">更改</button>
            </div>
        </form>
    </div>
    <div id="modal01" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <strong>提示：</strong></br>
                <p>网络异常请稍后重试！</p>
            </div>
        </div>
    </div>
    <div id="modal02" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <strong>提示：</strong></br>
                <p>更改成功</p>
            </div>
        </div>
    </div>
</div>
<!--/*/<th:block th:replace="weixin/_fragments :: script">/*/-->
<script src="../../static/jquery/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="../../static/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../static/lib/bootstrapValidator/js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
<!--/*/</th:block>/*/-->
<script>
    $(function() {
        /*表单验证的初始化*/
        $('form').bootstrapValidator({
            fields :{
                name: {
                    validators: {
                        notEmpty: {
                            message: "姓名不能为空"
                        },
                        stringLength: {
                            min: 2,
                            max: 4,
                            message: "姓名必须在2-4位之间"
                        }
                    }
                },
                telephone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '手机号格式错误'
                        }
                    }
                }
            }
        });
    });

    // 提交时验证
    $('#submit').click(function () {
        var bootstrapValidator = $('form').data('bootstrapValidator');
        // 提交时验证
        $('#submit').click(function () {
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                var url = "/user/userInfoUpdate"
                var data = $('form').serialize();
                $.post(url, data, function (msg) {
                    if (msg == "1") {
                        $("#modal01").modal("show");
                    } else if (msg == "2") {
                        $("#modal02").modal("show");
                    }
                })
            }
            return false;
        });
    });
</script>
</body>
</html>
